<template>
    <g>
        <path
            :id="props.itemInfo.id"
            :d="positionArrarToPath(props.itemInfo.props.point_position.val)"
            fill="none"
            :stroke="
        props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
          ? props.itemInfo.animations.color.val
          : props.itemInfo.props.stroke.val
      "
            :stroke-width="props.itemInfo.props['stroke-width'].val"
            style="cursor: move"
            stroke-dashoffset="0"
            :stroke-dasharray="
        props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
          ? props.itemInfo.props['stroke-width'].val * 3
          : 0
      "
        >
            <animate
                v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity"
                attributeName="stroke-dashoffset"
                :from="props.itemInfo.animations.reverse.val ? 0 : 1000"
                :to="props.itemInfo.animations.reverse.val ? 1000 : 0"
                :dur="`${props.itemInfo.animations.dur.val}s`"
                :repeatCount="props.itemInfo.animations.repeatCount.val"
            />
        </path>
        <!-- 水珠 -->
        <path
            v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.WaterDrop"
            :d="positionArrarToPath(props.itemInfo.props.point_position.val)"
            fill="none"
            fill-opacity="0"
            :stroke="props.itemInfo.animations.color.val"
            :stroke-width="props.itemInfo.props['stroke-width'].val"
            :stroke-dasharray="props.itemInfo.props['stroke-width'].val * 3"
            stroke-dashoffset="0"
            stroke-linecap="round"
        >
            <animate
                attributeName="stroke-dashoffset"
                :from="props.itemInfo.animations.reverse.val ? 0 : 1000"
                :to="props.itemInfo.animations.reverse.val ? 1000 : 0"
                :dur="`${props.itemInfo.animations.dur.val}s`"
                :repeatCount="props.itemInfo.animations.repeatCount.val"
                fill="freeze"
            />
        </path>
        <!-- 轨迹 -->
        <circle
            v-else-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Track"
            cx="0"
            cy="0"
            :r="props.itemInfo.props['stroke-width'].val * 2"
            :fill="props.itemInfo.animations.color.val"
        >
            <animateMotion
                :path="
          positionArrarToPath(
            props.itemInfo.animations.reverse.val
              ? [...props.itemInfo.props.point_position.val].reverse()
              : props.itemInfo.props.point_position.val
          )
        "
                :dur="`${props.itemInfo.animations.dur.val}s`"
                :repeatCount="props.itemInfo.animations.repeatCount.val"
            >
            </animateMotion>
        </circle>
        <!-- 更改线段 -->
        <g v-if="pointVisiable">
            <circle
                v-for="(item, index) in itemInfo.props.point_position.val"
                :key="index"
                :cx="item.x"
                :cy="item.y"
                r="6"
                stroke-width="1"
                :stroke="itemInfo.props.stroke.val"
                fill="#fff"
                style="cursor: pointer"
                @mousedown="setConnectionLineNode(index, $event, item.x, item.y)"
            />
        </g>
    </g>
</template>

<script>
import { positionArrarToPath } from '@/utils/utils';
import { EConfigAnimationsType } from "@/config-center/types";
import { EGlobalStoreIntention } from "@/store/global/types";
import { useGlobalStore } from "@/store/global";
export default {
    props: {
        itemInfo: {
            type: Object,
            default: () => ({})
        },
        pointVisiable: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        positionArrarToPath,
        setConnectionLineNode(point_index, e, x, y) {
            // 处理改变线段时的事件逻辑
            // 例如：设置状态，触发事件等
            const globalStore = useGlobalStore(); // 假设你在Vue 2中使用了Vuex来管理全局状态
            if (globalStore.intention === EGlobalStoreIntention.Connection) {
                return;
            }
            globalStore.setHandleSvgInfo(this.itemInfo);
            const { clientX, clientY } = e;
            e.stopPropagation();
            globalStore.connection_line_node_info = {
                init_pos: { x, y },
                point_index: point_index
            };
            globalStore.intention = EGlobalStoreIntention.SetConnectionLineNode;
            globalStore.setMouseInfo({
                state: EMouseInfoState.Down,
                position_x: clientX,
                position_y: clientY,
                now_position_x: clientX,
                now_position_y: clientY,
                new_position_x: 0,
                new_position_y: 0
            });
        }
    }
};
</script>
